<template>
  <div class="pk-select">
    <div class="pk-select-itembox" @click="Setshow">
      <div class="flex-1">
        <span v-if="inputtext">{{ selectText }}</span>
        <span v-else class="gray-color">{{ placeholder }}</span>
      </div>
      <div><van-icon name="arrow-down" color="#999"/></div>
    </div> 
    <popup-component v-if="show" :options="options" :selValue="selValue" :data="data" @onClose="show=false" @onEnd="onEnd" @onColseItem="onColseItem"></popup-component> 
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
const emit = defineEmits(['update:modelValue', 'change', 'onHandlerColseItem'])
import popupComponent from './popup.vue'
const show = ref(false)
const props = defineProps({
  modelValue:{
    type: [String, Number],
    default: ''
  },
  placeholder:{
    type: String,
    default: ''
  },
  disabled:{
    type: Boolean,
    default: false
  },
  selValue: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  },
  data: {
    type: Object,
    default: () => {}
  }
})

const inputtext = computed({
    set(val) {
        emit("update:modelValue", val);
    },
    get() {
      console.log('------get-----', props.modelValue);
      return props.modelValue;
    },
});

const selectText = computed(() => {
  return props.options.find(item => item.value === props.modelValue)?.label
})

const onColseItem = (e) => {
  emit('onHandlerColseItem', e)
}

const onEnd = (e) => {
  show.value = false
  emit('update:modelValue', e.value)
  emit('change', e)
} 

const Setshow = () => {
  if(!props.disabled){
    show.value = true
  }
}

</script>

<style lang="scss" scoped>
.pk-select{
  &-itembox{
    height: 34px;
    line-height: 34px;
    display: flex;
    flex-direction: row;
    border: #ddd 1px solid;
    min-width: 160px;
    border-radius: 4px;
    padding: 0 12px;
  }
}
</style>